<template>
    <div class="app-container">
        <el-row>
            <el-form ref="userfrom" :model="user" label-width="100px" :rules="rules">
                <el-form-item label="登录账号" class="username">
                    <span> {{user.username}} </span>
                </el-form-item>
                <el-form-item label="输入旧密码" prop="oldUserPassword">
                    <el-input v-model="user.oldUserPassword" :maxlength="12" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="输入新密码" prop="userpassword">
                    <el-input v-model="user.userpassword" :maxlength="12" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="duplicatePwd">
                    <el-input v-model="user.duplicatePwd" :maxlength="12" type="password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <div class="block" style="text-align:center;width:350px;">
                <span class="wrapper">
                    <el-button @click="onSubmit">
                        <icon-svg icon-class="baocun1"></icon-svg>&nbsp;&nbsp;保存</el-button>
                    <el-button @click="cancel">
                        <icon-svg icon-class="quxiao"></icon-svg>&nbsp;&nbsp;取消</el-button>
                </span>
            </div>
        </el-row>
    </div>
</template>

<style scoped>
.pagination {
    text-align: center;
}

.viewBtn {
    float: right;
}

.el-input {
    width: 210px;
}

.el-select {
    width: 210px;
}

.tips {
    font-size: 14px;
    color: red;
}

.resetPassword {
    float: right;
}

.username {
    margin-bottom: 10px;
}
</style>

<script>

import { chanUserPassword } from 'api/system';
import { isWsPassword } from 'utils/validate';
import Cookies from 'js-cookie';

export default {
    data() {
        // 效验用户密码
        const checkPwd = (rule, value, callback) => {
            if (!isWsPassword(value)) {
                callback(new Error('密码由8到12位大、小字母、数字及特殊字符组成'));
            } else {
                callback();
            }
        }
        return {
            user: {
                uid: Cookies.get('uid'),
                username: Cookies.get('username'),
                oldUserPassword: '',
                userpassword: '',
                duplicatePwd: ''
            },
            rules: {
                oldUserPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
                userpassword: [{ required: true, message: '请输入新密码', trigger: 'blur' },
                { validator: checkPwd, trigger: 'blur' }],
                duplicatePwd: [{ required: true, message: '请输入确认密码', trigger: 'blur' },
                { validator: checkPwd, trigger: 'blur' }],
            },
        }
    },
    created() { },
    methods: {
        onSubmit() {
            let requestParams = {
                uid: this.user.uid,
                oldUserPassword: this.user.oldUserPassword,
                userpassword: this.user.userpassword,
                duplicatePwd: this.user.duplicatePwd
            }
            this.$refs['userfrom'].validate(valid => {
                if (valid) {
                    if (requestParams.userpassword !== requestParams.duplicatePwd) {
                        this.$message({
                            showClose: true,
                            message: '两次输入的密码不一致，请重新输入',
                            type: 'error'
                        });
                        return;
                    }
                    chanUserPassword(requestParams).then(response => {
                        let res = response.data;
                        if (res.flag == 1) {
                            let successMessage = res.message;
                            this.$message({
                                showClose: true,
                                message: successMessage,
                                type: 'success'
                            });
                            this.$router.go(-1);
                            // this.$alert(successMessage, '提示信息', {
                            //   confirmButtonText: '确定',
                            //   callback: action => {
                            //     // this.$message({
                            //     //   type: 'info',
                            //     //   message: `action: ${action}`
                            //     // });
                            //   }
                            // });
                        } else {
                            let failedMessage = res.message;
                            this.$message({
                                showClose: true,
                                message: failedMessage,
                                type: 'error'
                            });
                            // this.$alert(failedMessage, '提示信息', {
                            //   confirmButtonText: '确定',
                            //   callback: action => {
                            //     // this.$message({
                            //     //   type: 'info',
                            //     //   message: `action: ${action}`
                            //     // });
                            //   }
                            // });
                        }
                    });
                }
            });
        },
        cancel() {
            this.$router.go(-1)
        }
    }
}
</script>